<script setup>
import { ref } from "vue";
import { getDynamicDetailService,likeDynamic } from "@/api/dynamic";
import {WarnTriangleFilled } from "@element-plus/icons-vue";
import { useRoute } from "vue-router";
import {getIsFollowService,followService,unfollowService} from "@/api/follow"
import { useUserStore } from "@/stores/user";
import {dynamicReportService,commentReportService} from '@/api/report'
import {getCommentListService,LeaveCommentService,likeCommentService,deleteCommentService} from '@/api/comments'
import router from "@/router";
import heada_Image from"@/assets/boy.jpg"

const image=heada_Image
const userStore = useUserStore();
const route = useRoute();
const detail = ref({});

//关注
const isFollow=ref(true)
const getIsFollow=async ()=>{
  const res =await getIsFollowService(detail.value.userId)
  console.log(res)
  isFollow.value=res.data

}

//获取动态详情
const getDetail = async () => {
  const res = await getDynamicDetailService(route.params.id);
  detail.value = res.data;
  console.log(res)
  if(userStore.userId != detail.value.userId){
    getIsFollow()
  }
};

getDetail();


//获取评论
const comments=ref([])
const getcomments=async ()=>{
  const res=await getCommentListService(route.params.id)
  comments.value=res.data.list
  comments.value=comments.value.map(item=>{
    item.islike=false
    return item
  })
}
getcomments()

//发表评论
const content=ref('')
const leaveComment=async ()=>{
  const res=await LeaveCommentService(content.value,route.params.id)
  
  console.log(res)
  getcomments()
}


//举报
const Report=(commentId)=>{

  let title
  if(commentId){
    title='评论举报'
  }else{
    title='动态举报'
  }

  ElMessageBox.prompt('请输入举报理由', title, {
    confirmButtonText: '提交',
    cancelButtonText: '取消',
    inputPattern: /^.+$/,
    inputErrorMessage: '举报理由为空',
    
  })
    .then(async ({value}) => {
      if(commentId){
        const res=await commentReportService(commentId,value)
        console.log(res)
      }else{
        const res=await dynamicReportService(parseInt(route.params.id),value)
        console.log(res)
      }
      
      ElMessage({
        type: 'success',
        message: '举报成功',
      })
    })
    .catch(() => {
      
    })
}


//点赞
const isDynamicLike=ref(false)
const upvote = async (comment)=>{
  if(comment){
    console.log(comment)
    comment.islike=true
    comment.likeNum+=1
    const res=await likeCommentService(comment.commentId)
    console.log(res)
    // getcomments()
  }else{
    const res=await likeDynamic(parseInt(route.params.id))
    console.log(res)
    isDynamicLike.value=true
    getDetail()
  }
  

}

const follow=async ()=>{
  console.log( detail.value.userId)
  const res=await followService(detail.value.userId)
  console.log(res)
  ElMessage.success("已关注");
  getDetail()

}
//取消关注
const unfollow=async ()=>{
  const res=await unfollowService(detail.value.userId)
  console.log(res)
  ElMessage.success("取消关注");
  isFollow.value=false
}


//删除评论
const delcomment=async (commentId)=>{

  const res=await deleteCommentService(commentId)
  getcomments()
  console.log(res)
}

</script>
<template>
  

  <div class="article-detail-page">
    <nav class="nav">动态详情</nav>
    <header class="header">
      <h1>{{ detail.title }}</h1>
      <p>{{ detail.publishTime }}</p>
      <p>
        <span @click="router.push(`/personalCenter/${detail.userId}`)">
        <img width="38px" v-if="detail.avatar!='default.jpg'" :src="detail.avatar">
              <img v-else width="38px" src="@/assets/boy.jpg" />
            </span>
        <span style="font-size: medium; margin-left: 15px;">{{ detail.userName }}</span>
        <span
          v-if="userStore.userId != detail.userId"
          style="font-size: medium; margin-left: 30px"
        >
          <el-button v-if="!isFollow" type="info" @click="follow">关注</el-button>
          <el-button v-else type="info" @click="unfollow">已关注</el-button>
          
        </span>
      </p>
    </header>
    <main class="body">
      <div v-html="detail.content"></div>
      <p style="text-align: right">
            <el-button v-if="!isDynamicLike" @click="upvote()"  text> <img style="width: 20px;" src="@/assets/aixin.png" /></el-button>
            <el-button v-else @click="upvote()"  text> <img style="width: 20px;" src="@/assets/aixin2.png" /></el-button>
            {{ detail.likeNum }}
            <el-button v-if="userStore.userId!=detail.userId" @click="Report()" text><el-icon size="20" ><WarnTriangleFilled  /></el-icon> </el-button>
          </p>
      <!-- <el-divider /> -->
    </main>

    <el-footer>
      <div style="width: 600px;">
        
        <p>评论区（{{comments.length}}）</p>
        <el-form
          ref="ruleFormRef"
          style="max-width: 600px"
          :model="ruleForm"
          status-icon
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
        >
          <el-form-item prop="pass">
            <el-input
              v-model="content"
              maxlength="200"
              style="width: 600px;"
              rows="8"
              placeholder="有想法?留下评论吧~"
              show-word-limit
              type="textarea"
            />
          </el-form-item>
        </el-form>
        <p style="text-align: right;">
          <el-button
          @click="leaveComment"
          :disabled="content.length<=0"
            type="primary"
            text
          >发表评论</el-button>
        </p>
      </div>

      <el-divider border-style="dashed" />
      <div v-for="comment in comments" :key="comment.commentId" class="evaluate">
        <div class="avatar">
          <el-avatar
            fit="fill"
            :src="comment.avatar =='default.jpg' ? image: comment.avatar "
          />
        </div>
        <div calss="info">
          <!-- <p>{{ comment.userName }}</p> -->
          <p style="margin-left: 50px;position: relative;">
          <span>{{ comment.userName }}</span><br/>
          {{ comment.content }}
          <span style="position: absolute; left: 50;padding-left: 30px;">
            <el-button v-if="comment.userId==userStore.userId" link  @click="delcomment(comment.commentId)"> 删除 </el-button>
          </span>
        </p>
          
            <!-- <span style="padding-left: 20px;">   </span> -->
            <!-- <span><el-button v-if="comment.userId==userStore.userId" link  @click="delcomment(comment.commentId)"> 删除 </el-button></span> -->
          
          <p style="position: relative;">
            
            <span style="position: absolute; right: 0;">
            <el-button v-if="!comment.islike" @click="upvote(comment)" text> <img style="width: 20px;" src="@/assets/aixin.png" /></el-button>
            <el-button v-else @click="upvote(comment)"  text> <img style="width: 20px;" src="@/assets/aixin2.png" /></el-button>
            {{ comment.likeNum }}
            <el-button v-if="userStore.userId!=comment.userId" @click="Report(comment.commentId)" text><el-icon size="20" ><WarnTriangleFilled  /></el-icon> </el-button>
          </span>
          </p>
        </div>
      </div>
    </el-footer>
  </div>
</template>
<style scoped>
.evaluate {
  /* height: 120px; */
  width: 70%;
  min-height: 100px;
  .avatar {
    /* height: 100px; */
    width: 70px;
    float: left;
    margin-top: 5px;
  }
  .info {
    height: 100px;
    float: left;    
  }
}

.article-detail-page {
  .nav {
    height: 34px;
    border-bottom: 1px solid #e4e4e4;
    line-height: 34px;
    text-align: center;
    
  }
  .header {
    padding: 0 15px;
    p {
      color: #999;
      font-size: 12px;
      display: flex;
      align-items: center;
    }
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
    }
  }
  .body {
    padding: 0 15px;
  }
}
</style>
